<template>
  <el-dialog
    class="toast-dialog"
    :visible="visible"
    :append-to-body="true"
    :show-close="false"
    width="520px"
  >
    <div class="content d-flex flex-column jc-around ai-center">
      <el-progress
        type="circle"
        :percentage="percent"
        :status="status"
      ></el-progress>
      <div>{{$t('common.picUploadSuccess') }}</div>
      <div>{{$t('common.inLibSuccessNum') }}:{{ batchInfo.total }}</div>
      <div>{{$t('common.inLibErrorNum') }}:{{ batchInfo.err_count }}</div>
      <MyButton class="text" type="text" @click="handleClickDetail"
        >{{$t('common.clickToShowDetail') }}</MyButton
      >
      <MyButton class="confirm" @click="handleConfirm">{{$t('common.confirm') }}</MyButton>
    </div>
  </el-dialog>
</template>

<script>
import MyButton from "@/components/Button";
import { downloadUrl } from "@/services";
export default {
  components: {
    MyButton,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    percent: {
      type: Number,
      default: 0,
    },
    batchInfo: {
      type: Object,
      default: () => ({
        total: 0,
        err_count: 0,
      }),
    },
  },
  computed: {
    status() {
      return this.percent === 100 ? "success" : "";
    },
  },
  methods: {
    handleConfirm() {
      this.$confirm(
        this.$t('targets.closeTip'),
        this.$t('common.promit'),
        {
          confirmButtonText: this.$t("common.confirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      ).then(async () => {
        this.$emit("update:visible", false);
      });
    },
    handleClickDetail() {
      // downloadUrl(this.batchInfo.url);
      window.open(window.config.resourceHost + this.batchInfo.url, "detailInfo")
    },
  },
};
</script>
<style lang="less" scoped>
.toast-dialog {
  z-index: 9999;
  /deep/ .el-dialog__header {
    height: 0;
    padding: 0;
  }
  .content {
    height: 300px;
    img {
      width: 24px;
      height: 24px;
      margin-right: 15px;
    }
  }
}
</style>
